<template>
	<view class="container">
		<Search></Search>
		<Nearseller></Nearseller>
		<view :class="{sort_flex: isFlex}" class="sort-pages">
			<Sortsearch id="split-page" :splitPageTop="splitPageTop"></Sortsearch>
		</view>
		<view :style="'height:'+ screenHeight + 'px'" style="padding: 0 0 0 0;">
			<Sellerinfo ref="sellerInfoTemplete"></Sellerinfo>
		</view>
		<Promptinfo v-if="false" :dataInfo="dataInfo"></Promptinfo>
		
	</view>
</template>

<script>
		
	import Search from '../../components/index/search.vue';         // 搜索，搜索快捷标签，轮播图
	import Nearseller from '../../components/index/nearseller.vue'; // 附近商家
	import Sortsearch from '../../components/index/sortsearch.vue'; // 排序
	import Sellerinfo from '../../components/index/sellerinfo.vue'; // 商家信息组件
	import Promptinfo from '../../components/common/promptinfo.vue'; // 提示信息
	

	
	export default {
		components: {
			Search,
			Nearseller,
			Sortsearch,
			Sellerinfo,
			Promptinfo
		},
		data() {
			return {
				screenHeight: 0, // 屏幕高度
				dataInfo: '没有商家数据',
				rect: 0, // 页面的滚动距离
				splitPageTop: 0, // 综合排序所在的
				isFlex: false ,// 排序标签是否置顶
			}
		},
		methods: {
			// 页面被点击进行上升
			pagePoll() {
				// 将页面滚动到当前位置
				wx.pageScrollTo({
					scrollTop: this.splitPageTop,
					//duration: 300  // 动画时长,当没有动画时长的时候不会发生有空白的拉伸现象
					duration: 0
				})
				
			}
		},
		
		// 监听页面加载进入
		onLoad() {
			// 监听筛选组件距离顶部的距离
			const query = wx.createSelectorQuery()
			query.select('#split-page').boundingClientRect()
			query.selectViewport().scrollOffset()
			query.exec((res)=>{  // 层级太深会取不到this，所以这里后面需要改成箭头函数。
				console.log(res[0].top)      // #the-id节点的上边界坐标
				console.log(res[1].scrollTop) // 显示区域的竖直滚动位置
				this.splitPageTop = res[0].top;
			})
			
			console.log("屏幕信息");
			wx.getSystemInfo({
			　　success:(res)=>{
				　　console.log(res); 
					this.screenHeight = res.screenHeight;
				　　// 得到一个系统信息对象，以 iPhone 7 Plus 为例
				// 　　SDKVersion:"1.9.0"  // 客户端的基础版本库
				// 　　batteryLevel: 100  //  会打印出此属性及属性值，据说是手机电量，但实际上跟手机电量并不吻合
				// 　　brand:"iPhone"  // 手机品牌
				// 　　errMsg:"getSystemInfo:ok"
				// 　　fontSizeSetting:16    // 用户设置的字体大小，单位px（以“我-设置-通用-字体大小”中的设置为准）
				// 　　language:"zh_CN"   // 微信设置的语言
				// 　　model:"iPhone 7 Plus<iPhone9.2> "   // 手机型号
				// 　　pixelRatio:3  // 设备的像素比
				// 　　platform:"ios"   // 客户端平台
				// 　　screenHeight:736  // 屏幕高度
				// 　　screenWidth:414  // 屏幕宽度
				// 　　system:"iOS 11.1.2"  // 操作系统版本
				// 　　version:"6.6.1"   // 微信版本号
				// 　　windowHeight:672    // 可使用窗口的高度
				// 　　windowWidth:414   // 可使用窗口的宽度
			　　}
			})
		},
		
		// 监听页面滚动的距离
		onPageScroll(e) {
			// console.log(e.scrollTop);
			this.rect = e.scrollTop;
		},
		
		// 计算属性 监听页面是否置顶
		computed: {
			pageSplit() {
				if(this.rect >= this.splitPageTop) {
					this.isFlex = true;
				} else {
					this.isFlex = false;	
				}
			}
		},
		/**
		  * 页面上拉触底事件的处理函数
		  */
		 onReachBottom: function () {
		     console.log("拉到底了index");
			 this.$refs.sellerInfoTemplete.getSellerInfo();
		 },   
	}
</script>

<style>
	.container {
		 /* 顶部的内边距 */
		/* padding: 10px; */
		font-size: 14px;
		line-height: 24px;
		background-color: #FBFBFB;
		/* margin: 0 15upx; */ /*内外边距*/
	}
	
	.sort-pages {
		background-color: white;
	}
	
	/* 排序置顶 */
	.sort_flex {
		position: fixed;
		left: 0;
		top: -2upx;
		right: 0;
		/* padding: 0 10upx 0 10upx;251,251,251 */
	}
</style>
